<template>
  <div>
    <el-container>
      <!--head-->
      <el-header>
        <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item style="color:#F56C6C;">刷题王</el-menu-item>
          <el-menu-item index="/index/frontPage"><i class="el-icon-s-home" style="color: #73bbf7">首页</i></el-menu-item>
          <el-menu-item index="/userCenter" style="margin-left: 30px;"><i class="el-icon-s-custom" style="color: #73bbf7">个人中心</i></el-menu-item>
          <el-menu-item index="/uploadTopic" style="margin-left: 70px"><i class="el-icon-s-order" style="color: #73bbf7">上传题目</i></el-menu-item>
          <!--搜索和头像-->
          <div style="display: inline-block;display: inline">
            <div >
              <!--搜索-->
              <el-input v-model="input" placeholder="快搜索题目吧" style="width: 500px;"></el-input>
              <!--搜索按钮-->
              <!--        style="margin-top:10px;height:42px"      -->
              <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
            </div>
          </div>
            <!--      style="margin-left: 930px;margin-top: -60px;height: 30px"      -->
            <div style="margin-left: 930px;margin-top: -60px;height: 30px">
              <!--用户头像部分-->
              <!--el-dropdown为下拉菜单-->
              <el-dropdown>
          <span class="el-dropdown-link">
            <!--用户头像图标-->
            <!--    style="float: right;margin-right: -200px;margin-top: 5px"        -->
            <el-row class="demo-avatar demo-basic" >
            <el-col :span="12">
              <div class="sub-title"></div>
              <div class="demo-basic--circle">
                <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
              </div>
            </el-col>
          </el-row>
          </span>
                <el-dropdown-menu slot="dropdown" style="margin-top: -15px;float: right;margin-right: -230px">
                  <el-dropdown-item router>
                    <i class="el-icon-user" @click="goUserCenter"> 个人中心</i>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-bell" @click="myInfo"> 我的消息</i>
                  </el-dropdown-item>
                  <el-dropdown-item style="color:#F56C6C">
                    <i class="el-icon-switch-button" @click="signOut"> 退出登录</i>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

        </el-menu>
      </el-header>


      <router-view/>

      <el-footer style="background-color: #909399">
        <i class="el-icon-message">联系作者：zrhnzlh@163.com</i>
        <i class="el-icon-position" style="margin-left: 30px">
          <el-link type="primary" href="https://gitee.com/LittleHanQAQ">gitee联系我</el-link>
        </i>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
/*import login from "@/components/login";*/

export default {
  name: "index",
  /*components:{
    login
  },*/
  data(){
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      input: '',//搜索栏输入的值
      registerFormVisible:false,

    }
  },
  methods:{
    //验证
    verifyFunction(){
      //alert(11)
      this.$axios.get("/api/frontPage/showIndex").then(resp=>{
        console.log(resp)
      })
    },
    //搜索按钮
    search(){
      //跳转页面到详细题目页面，将题目id传过去
      let routeData = this.$router.resolve({
        path: "/searchTopic",
        query: {
          searchText:this.input
        }
      });
      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');
    },
    //首页按钮
    indexButton(){
      this.isShow=true;
      this.verifyFunction();
    },
    //头像中的退出登录
    signOut(){
      this.$store.commit("SET_TOKEN",'');
      this.$message({
        message: '已退出登录',
        type: 'success'
      });
      this.$router.replace("/lastIndex");
    },
    //头像中的个人中心
    goUserCenter(){
      this.$router.replace("/userCenter/myInfo");
    },
    //头像我的消息
    myInfo(){
      this.$router.replace("/userCenter/myNotice");
    }

  },
  created() {
    this.verifyFunction();
  }
}
</script>

<style scoped>
div{

}
.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #f1f2f6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f1f2f6;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 385px;
  height:250px;
  margin-top:20px;
  margin-left:10px;
}
.webmaster{
  width: 385px;
  height:158px;
  margin-left:10px;
  margin-top:20px;
}
</style>